<template>
  <el-card class="svg-icon-demo">
    <template #header>
      <el-row class="svg-icon-demo__actions">
        <el-col :span="12">
          <el-switch
            v-model="copyType"
            active-text="复制组件"
            inactive-text="复制name"
            active-value="component"
            inactive-value="name"
            size="default"
            class="svg-icon-demo__actions-switch"
          />
        </el-col>
        <el-col :span="12">
          <el-switch
            v-model="size"
            active-text="30px"
            inactive-text="20px"
            :active-value="30"
            :inactive-value="20"
            size="default"
            class="svg-icon-demo__actions-switch"
          />
          <el-switch
            v-model="color"
            active-text="蓝色"
            inactive-text="默认"
            active-value="#367aff"
            inactive-value="none"
            size="default"
            class="svg-icon-demo__actions-switch"
          />
        </el-col>
      </el-row>
    </template>
    <div class="svg-icon-demo__title">
      本地svg图标 （点击图标复制代码）
    </div>
    <ul class="svg-icon-demo__list">
      <li
        v-for="icon in icons"
        :key="icon.name"
        class="svg-icon-demo__item"
        @click="copyContent(icon.name)"
      >
        <span class="svg-icon-demo__icon">
          <cs-icon
            :name="icon.name"
            :size="size"
            :color="color"
            class="svg-icon-demo__cs-icon"
          />
          <span class="svg-icon-demo__icon-name">
            {{ icon.name.replace('SvgIcon', '') }}
          </span>
        </span>
      </li>
    </ul>
  </el-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import clipboardCopy from 'clipboard-copy'
  import { ElMessage } from 'element-plus'
  import icons from './index'

  const color = ref('none')
  const size = ref(30)

  const copyType = ref('component')

  const copyContent = async (name: string) => {
    let content = name
    if (copyType.value === 'component') {
      content = `<cs-icon name="${content}" />`
    }
    let messageType = ''
    try {
      await clipboardCopy(content)
      messageType = 'success'
    } catch {
      messageType = 'error'
    }
    ElMessage({
      message: `copy ${messageType} [${content}]`,
      type: messageType
    })
  }
</script>

<style lang="scss">
  .svg-icon-demo {
  }
  .svg-icon-demo__actions {
  }
  .svg-icon-demo__actions-switch {
    margin-left: 20px;
  }
  .svg-icon-demo__title {
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
  }
  .svg-icon-demo__list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border-top: 1px solid #e4e7ed;
    border-left: 1px solid #e4e7ed;
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .svg-icon-demo__list--default-color {
    .svg-icon-demo__cs-icon {
      color: #367aff;
    }
  }
  .svg-icon-demo__item {
    text-align: center;
    height: 90px;
    font-size: 13px;
    border-right: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    &:hover {
      background-color: #f5f5f5;
      .svg-icon-demo__cs-icon {
        color: #367aff;
      }
      color: #367aff;
    }
  }
  .svg-icon-demo__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;

    .svg-icon-demo__icon-name {
      margin-top: 8px;
    }
  }

  .svg-icon-demo__tabs {
    margin-top: 30px;

    .el-tabs__header,
    .el-tabs__item {
      height: 40px;
      &.is-active > span {
        transform: scale(1);
      }
    }
    .el-tabs__nav-label {
      font-size: 14px;
    }

    .el-tabs__content {
      padding: 0;
    }
  }
</style>
